<template>
  <h1 class="h1">
    签到
  </h1>
  <div class="clock">
    {{ dqsj }}
  </div>
  <ul v-if="!dq">
    <el-button type="primary" :icon="bj" @click="dk">
      <router-link class="qd">打卡签到</router-link>
    </el-button>
  </ul>
  <div v-else>
    已签到
    <div class="sign-in-time">
      签到时间: {{ qdsj }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const dqsj = ref(new Date().toLocaleTimeString());
const dq = ref(false); // 用于跟踪是否已经签到
const qdsj = ref(''); // 用于存储签到时间
const router = useRouter();

let zs;

const gxsj = () => {
  dqsj.value = new Date().toLocaleTimeString();
};

const dk = () => {
  dq.value = true; // 设置已签到状态
  qdsj.value = new Date().toLocaleString(); // 记录签到时间
  localStorage.setItem('dq', JSON.stringify(dq.value));
  localStorage.setItem('qdsj', qdsj.value);
  router.push({ name: 'ranking', query: { qdsj } });
};

onMounted(() => {
  const bcdq = JSON.parse(localStorage.getItem('dq'));
  const bqdsj = localStorage.getItem('qdsj');
  if (bcdq) {
    dq.value = bcdq;
    qdsj.value = bqdsj;
  }
  zs = setInterval(gxsj, 1000); // 每秒更新一次时间
});

onUnmounted(() => {
  clearInterval(zs); // 清除定时器
});
</script>

<style scoped>
ul {
  list-style-type: none;
}
.qd {
  color: #fff;
}
.clock {
  font-size: 24px;
  margin-bottom: 20px;
}
.sign-in-time {
  margin-top: 10px;
  font-size: 18px;
}
</style>
